import React, {useState} from 'react';

const App = () => {

  // 学习如何定义一个响应式数据
  // 因为是函数式组件，所以不能使用 this
  // 我们定义数据的时候就不能在使用 state 进行定义
  // 在函数式组件中可以使用 useState 进行替代
  // 创建一个响应式状态 count ，和修改值的 setCount 函数
  // count 默认值是 100

  const [count, setCount] = useState(100)

  function reducer(){
    // console.log('被掉了减1');
    // setCount(count - 1)
    // 参数改为函数的写法
    // 如果参数是函数，那么返回值的内容就是要修改的内容
    // 该函数中有一个参数就是上一次的值
    setCount((prevCount)=>{
      return prevCount - 1
    })
  }

  return (
    <div>
      <h1>hooks - {count}</h1>
      <button onClick={()=>{
        // 调用修改方法，在原值基础上加 1
        setCount(count + 1)
      }}>加 1</button>
      <button onClick={reducer}>减 1</button>
    </div>
  );
};

export default App;
